Feature/study spot card by jpt1729 · Pull Request #4 · Longhorn-Developers/Longhorn-Studies

jpt1729 · 2026-02-23T20:10:52Z

Study spot card

…mponent robust and ready

DereC4 · 2026-03-08T21:45:02Z

https://discord.com/channels/743636346727301172/1480319890412802249

Made a thread for your PR, we typically do this with all of ours for UTRP and other projects if u check the history of this channel, feel free to add all your future PRs to here to get them indexed

Helps keep have a communication area that is faster

Copilot

Pull request overview

This PR adds NativeWind/Tailwind styling support to the Expo frontend and introduces initial UI components for a “study spot” card (including icons, tags, and open-status display), along with some supporting configuration and documentation updates.

Changes:

Add NativeWind/Tailwind + global CSS setup (Tailwind config, Metro config, Babel config, env typings).
Introduce new UI components: StudySpotCard, OpenStatus, Tag, and SVG icon components.
Add repo/docs updates (development workflow docs; frontend README tweak) and Windows-related patch files.

Reviewed changes

Copilot reviewed 23 out of 25 changed files in this pull request and generated 17 comments.

Show a summary per file

File	Description
frontend/tsconfig.json	Adds `nativewind-env.d.ts` to TS includes for NativeWind typing support.
frontend/tailwind.config.js	Introduces Tailwind theme tokens (colors/fonts/sizes) and NativeWind preset.
frontend/patches/nativewind.patch	Adds a patch intended to improve cross-platform path handling in nativewind.
frontend/patches/metro-config.patch	Adds a patch intended to improve Windows `import()` handling for metro-config.
frontend/package.json	Adds NativeWind/Tailwind deps; adjusts versions of RN deps.
frontend/nativewind-env.d.ts	Adds NativeWind generated type reference file.
frontend/metro.config.js	Configures Metro with NativeWind and Reanimated wrappers.
frontend/global.css	Adds Tailwind directives and a `@font-face` for Roboto Flex.
frontend/components/ui/tags/index.tsx	Adds a `Tag` pill component styled via className.
frontend/components/ui/study-spot-card/index.tsx	Adds the Study Spot card UI composition.
frontend/components/ui/open-status.tsx	Adds open/closing/closed status display with icon and optional hours.
frontend/components/ui/icons/index.tsx	Adds shared `IconProps` and exports icon components.
frontend/components/ui/icons/clock.tsx	Adds Clock icon with NativeWind `cssInterop`.
frontend/components/ui/icons/bookmark.tsx	Adds Bookmark icon with NativeWind `cssInterop`.
frontend/components/ui/icons/caret-right.tsx	Adds Caret icon with NativeWind `cssInterop`.
frontend/components/ui/icons/walking.tsx	Adds Walking icon with NativeWind `cssInterop`.
frontend/babel.config.js	Adds NativeWind Babel preset/config.
frontend/app/_layout.tsx	Imports `global.css` into the app layout.
frontend/app/(tabs)/test.tsx	Adds a test tab/screen to render the new card (appears temporary).
frontend/app/(tabs)/index.tsx	Adds (currently unused) imports for new UI components.
frontend/app/(tabs)/_layout.tsx	Minor formatting change in the Tabs layout.
frontend/app.json	Sets web bundler to Metro.
frontend/README.md	Renames app header and adds a WSL note.
README.md	Adds branch/commit conventions + PR process documentation.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

frontend/app/_layout.tsx

frontend/app/(tabs)/test.tsx

Copilot · 2026-03-23T21:31:54Z

frontend/components/ui/icons/clock.tsx

+  ...props
+}: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>


The color prop is declared/defaulted but never applied. This is likely to be flagged as an unused variable and also makes the prop misleading—either remove color from the component signature or pass it through (e.g., via the color prop/style on <Svg> so currentColor resolves).

Suggested change

<Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>

<Svg width={size} height={size} viewBox="0 0 24 24" fill="none" color={color} {...props}>

Copilot · 2026-03-23T21:31:54Z

frontend/package.json

+    "react-native-reanimated": "^4.1.1",
+    "react-native-safe-area-context": "^5.6.0",


This project pins most Expo-managed React Native dependencies with ~ to match the Expo SDK (e.g., expo-*, react-native-gesture-handler, react-native-screens). Switching react-native-reanimated and react-native-safe-area-context to ^ can pull in incompatible minor versions on future installs; consider keeping the ~ range (or using expo install-managed versions) for SDK alignment.

Suggested change

"react-native-reanimated": "^4.1.1",

"react-native-safe-area-context": "^5.6.0",

"react-native-reanimated": "~4.1.1",

"react-native-safe-area-context": "~5.6.0",

Copilot · 2026-03-23T21:31:54Z

frontend/patches/nativewind.patch

+diff --git a/dist/metro/tailwind/v3/index.js b/dist/metro/tailwind/v3/index.js
+index 7e21e741ffedce14ecbe4aa0072412146bfad61e..bed4f97158390d296cba16fae10ae1cdef496c93 100644
+--- a/dist/metro/tailwind/v3/index.js


These patch files appear intended for patch-package, but there’s no patch-package dependency/postinstall hook and the filename isn’t versioned (patch-package expects patches/<pkg>+<version>.patch). As-is, this patch will not be applied in installs/CI; either wire up patching properly (and rename) or avoid patching by upgrading to a fixed upstream version / alternative configuration.

Copilot · 2026-03-23T21:31:56Z

frontend/components/ui/icons/walking.tsx

+  ...props
+}: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 14 14" fill="none" {...props}>


The color prop is declared/defaulted but never applied, which is misleading and may be caught by lint as an unused variable. Either pass it to the <Svg> (so currentColor works) or remove it from the props.

Suggested change

<Svg width={size} height={size} viewBox="0 0 14 14" fill="none" {...props}>

<Svg width={size} height={size} viewBox="0 0 14 14" fill="none" color={color} {...props}>

Copilot · 2026-03-23T21:31:57Z

frontend/patches/metro-config.patch

+diff --git a/src/loadConfig.js b/src/loadConfig.js
+index 7ac9d88404063ce86d8c15a91ce72c439b455075..2db611b8bd151622faa2cb21e757934815db2775 100644
+--- a/src/loadConfig.js


Same concern as the other patch: without a patching mechanism (e.g., patch-package + postinstall, or pnpm/yarn patchedDependencies) and a correctly named patch file, this change won’t take effect. If Windows path handling is required, ensure the patch is reliably applied in all environments (local + CI).

Copilot · 2026-03-23T21:31:57Z

frontend/components/ui/study-spot-card/index.tsx

+type StudySpotCardType = {
+  locationName: string;
+  buildingName: string;
+  location: string; // TODO: get proper type
+  hours: string[];
+  tags: string[];
+};
+export default function StudySpotCard({
+  locationName,
+  buildingName,
+  hours,
+  tags,
+}: StudySpotCardType) {
+  return (
+    <View className="flex flex-row gap-2 border p-2 rounded-lg border-card-border">
+      <View className="w-[78px] aspect-square relative bg-blue-500 rounded">
+        <Image
+          source="https://www.rambleratx.com/wp-content/uploads/2022/06/Texas-Union.jpeg"
+          placeholder={{ blurhash }}
+          contentFit="cover"
+          transition={1000}
+          style={{ width: "100%", height: "100%", borderRadius: 4 }}
+        />
+        <TouchableOpacity
+          className="bg-saved-bg rounded-full self-start p-1 absolute top-1 left-1"
+          onPress={() => console.log("Bookmark tapped!")}
+          hitSlop={{ top: 15, bottom: 15, left: 15, right: 15 }}
+        >
+          <BookmarkIcon size={16} className="text-white" />
+        </TouchableOpacity>
+      </View>
+      <View className="flex justify-between">
+        <View>
+          <View className="flex flex-row">
+            <Text className="text-spot-name text-burnt-orange font-bold">
+              {buildingName}
+            </Text>
+            <Text className="text-spot-name font-bold"> {locationName}</Text>
+          </View>
+          <View className="flex flex-row items-center gap-3">
+            <View className="flex flex-row gap-1">
+              <WalkingIcon size={14} className="text-gray-text" />
+              <Text className="text-gray-text text-status">0.1 mi</Text>
+            </View>
+            <OpenStatus openStatus="open" hours={["5:00am", "5:00pm"]} />
+          </View>
+        </View>
+        <View className="flex flex-row gap-1">
+          <Tag tag="Lounge" />
+          <Tag tag="Low Noise" />
+          <Tag tag="Near Food & Cafe" />
+        </View>


StudySpotCard is currently ignoring several of its props: hours and tags aren’t used (hardcoded values are rendered instead), and location is required but unused. This makes the component non-reusable and can confuse callers—either wire these props into the UI (map over tags, pass hours to OpenStatus, etc.) or remove them from the public API until implemented.

Copilot · 2026-03-23T21:31:57Z

frontend/tailwind.config.js

+        'gray-text': '#94A3B8',     // Gray text
+
+        // Opaque colors
+        // Note: You can also use Tailwind's built-in opacity modifier like `bg-brand-orange/50` 


The comment mentions bg-brand-orange/50, but brand-orange isn’t defined in this config. Consider updating the example to use one of the actual color keys (e.g., burnt-orange) to avoid confusion for future readers.

Suggested change

// Note: You can also use Tailwind's built-in opacity modifier like `bg-brand-orange/50`

// Note: You can also use Tailwind's built-in opacity modifier like `bg-burnt-orange/50`

frontend/package.json

Co-authored-by: Copilot <[email protected]>

jpt1729 added 3 commits February 21, 2026 23:23

feat: study spot card initial development

42ee0da

fix: fixed some bug errors and added everything needed to make the co…

3420233

…mponent robust and ready

fix: update package version

1d4d041

DereC4 assigned jpt1729 Mar 8, 2026

pi2chen requested a review from Copilot March 23, 2026 21:26

Copilot started reviewing on behalf of pi2chen March 23, 2026 21:27 View session

Copilot AI reviewed Mar 23, 2026

View reviewed changes

pi2chen and others added 3 commits March 23, 2026 16:34

Update frontend/app/_layout.tsx

33450bd

Co-authored-by: Copilot <[email protected]>

Update frontend/app/(tabs)/test.tsx

d7102c7

Co-authored-by: Copilot <[email protected]>

Merge branch 'main' into feature/study-spot-card

7a9f8d7

pi2chen approved these changes Mar 23, 2026

View reviewed changes

pi2chen merged commit 65206a8 into main Mar 23, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/study spot card#4

Feature/study spot card#4
pi2chen merged 6 commits intomainfrom
feature/study-spot-card

jpt1729 commented Feb 23, 2026

Uh oh!

DereC4 commented Mar 8, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI Mar 23, 2026

Uh oh!

Copilot AI Mar 23, 2026

Uh oh!

Copilot AI Mar 23, 2026

Uh oh!

Copilot AI Mar 23, 2026

Uh oh!

Copilot AI Mar 23, 2026

Uh oh!

Copilot AI Mar 23, 2026

Uh oh!

Copilot AI Mar 23, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	<Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
	<Svg width={size} height={size} viewBox="0 0 24 24" fill="none" color={color} {...props}>

		"react-native-reanimated": "^4.1.1",
		"react-native-safe-area-context": "^5.6.0",

	// Note: You can also use Tailwind's built-in opacity modifier like `bg-brand-orange/50`
	// Note: You can also use Tailwind's built-in opacity modifier like `bg-burnt-orange/50`

Conversation

jpt1729 commented Feb 23, 2026

Uh oh!

DereC4 commented Mar 8, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants